<template>
  <div class="settings-container">
    <div class="content-wrapper">
      <div class="settings-card">
        <div class="card-header">
          <h2>账户设置</h2>
        </div>

        <!-- 密码修改部分 -->
        <div class="section">
          <h3>修改密码</h3>
          <el-form
            :model="passwordForm"
            :rules="passwordRules"
            ref="passwordFormRef"
            label-width="120px"
          >
            <el-form-item label="当前密码" prop="currentPassword">
              <el-input
                v-model="passwordForm.currentPassword"
                type="password"
                show-password
              />
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                show-password
              />
            </el-form-item>

            <el-form-item label="确认新密码" prop="confirmPassword">
              <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                show-password
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="handlePasswordChange"
                :loading="loading.password"
              >
                保存修改
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 通知设置部分 -->
        <div class="section">
          <h3>通知设置</h3>
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="实验提醒">
              <el-switch
                v-model="notificationSettings.experimentAlert"
                active-color="#7367f0"
              />
            </el-form-item>

            <el-form-item label="团队消息">
              <el-switch
                v-model="notificationSettings.teamMessage"
                active-color="#7367f0"
              />
            </el-form-item>

            <el-form-item label="系统通知">
              <el-switch
                v-model="notificationSettings.systemNotice"
                active-color="#7367f0"
              />
            </el-form-item>

            <el-form-item label="通知方式">
              <el-checkbox-group v-model="notificationSettings.methods">
                <el-checkbox label="email">邮件通知</el-checkbox>
                <el-checkbox label="sms">短信通知</el-checkbox>
                <el-checkbox label="web">站内通知</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="handleNotificationSave"
                :loading="loading.notification"
              >
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 账户安全部分 -->
        <div class="section">
          <h3>账户安全</h3>
          <div class="security-items">
            <div class="security-item">
              <div class="security-info">
                <h4>双因素认证</h4>
                <p>启用双因素认证以提高账户安全性</p>
              </div>
              <el-switch
                v-model="securitySettings.twoFactor"
                active-color="#7367f0"
                @change="handle2FAChange"
              />
            </div>

            <div class="security-item">
              <div class="security-info">
                <h4>登录通知</h4>
                <p>在新设备登录时接收通知</p>
              </div>
              <el-switch
                v-model="securitySettings.loginAlert"
                active-color="#7367f0"
              />
            </div>
          </div>

          <el-button
            type="primary"
            @click="handleSecuritySave"
            :loading="loading.security"
            class="save-btn"
          >
            保存安全设置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const passwordFormRef = ref(null)
const loading = reactive({
  password: false,
  notification: false,
  security: false
})

// 密码表单数据
const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码验证规则
const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 通知设置数据
const notificationSettings = ref({
  experimentAlert: true,
  teamMessage: true,
  systemNotice: true,
  methods: ['email', 'web']
})

// 安全设置数据
const securitySettings = ref({
  twoFactor: false,
  loginAlert: true
})

// 处理密码修改
const handlePasswordChange = async () => {
  if (!passwordFormRef.value) return

  try {
    await passwordFormRef.value.validate()
    loading.password = true

    // 这里添加修改密码的API调用
    await new Promise((resolve) => setTimeout(resolve, 1000))

    ElMessage.success('密码修改成功')
    passwordForm.value = {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  } catch (error) {
    ElMessage.error('表单验证失败')
  } finally {
    loading.password = false
  }
}

// 处理通知设置保存
const handleNotificationSave = async () => {
  loading.notification = true
  try {
    // 这里添加保存通知设置的API调用
    await new Promise((resolve) => setTimeout(resolve, 1000))
    ElMessage.success('通知设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    loading.notification = false
  }
}

// 处理安全设置保存
const handleSecuritySave = async () => {
  loading.security = true
  try {
    // 这里添加保存安全设置的API调用
    await new Promise((resolve) => setTimeout(resolve, 1000))
    ElMessage.success('安全设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    loading.security = false
  }
}

// 处理双因素认证变更
const handle2FAChange = (value) => {
  if (value) {
    ElMessage.info('请扫描二维码完成双因素认证设置')
    // 这里可以添加显示二维码的逻辑
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background-color: #f8f8fb;

  .content-wrapper {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .settings-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(115, 103, 240, 0.08);

    .card-header {
      margin-bottom: 32px;
      padding-bottom: 16px;
      border-bottom: 2px solid #f8f8fb;

      h2 {
        font-size: 24px;
        color: #1e1e2d;
        font-weight: 600;
        margin: 0;
        background: linear-gradient(135deg, #7367f0 0%, #9f94ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .section {
      margin-bottom: 48px;
      padding: 24px;
      background: #f8f8fb;
      border-radius: 12px;

      h3 {
        font-size: 18px;
        color: #1e1e2d;
        margin-bottom: 24px;
        font-weight: 600;
      }

      .el-form {
        max-width: 500px;

        .el-form-item {
          margin-bottom: 24px;

          :deep(.el-form-item__label) {
            font-weight: 500;
            color: #1e1e2d;
          }

          :deep(.el-input__inner) {
            border-radius: 8px;
            border-color: #e2e2e2;

            &:focus {
              border-color: #7367f0;
              box-shadow: 0 0 0 2px rgba(115, 103, 240, 0.1);
            }
          }
        }
      }
    }

    .security-items {
      margin-bottom: 24px;

      .security-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: #ffffff;
        border-radius: 8px;
        margin-bottom: 16px;
        box-shadow: 0 2px 12px rgba(115, 103, 240, 0.05);

        .security-info {
          h4 {
            font-size: 16px;
            color: #1e1e2d;
            margin: 0 0 8px 0;
          }

          p {
            color: #6e6b7b;
            margin: 0;
            font-size: 14px;
          }
        }
      }
    }

    .save-btn {
      background: linear-gradient(135deg, #7367f0 0%, #9f94ff 100%);
      border: none;
      padding: 12px 24px;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(115, 103, 240, 0.3);
      }
    }
  }
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #7367f0;
  border-color: #7367f0;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #7367f0;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #7367f0 0%, #9f94ff 100%);
  border: none;
  padding: 12px 24px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(115, 103, 240, 0.3);
  }
}
</style>
